<template >
    <div>
        <!-- 面包屑 -->
        <div class="mbx">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="tab-box">
            <p> <el-button type="primary" @click="addroles">添加角色</el-button></p>
            <!-- two table  -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="expand" fixed>
                    <template slot-scope="scope">
                        <p v-if="scope.row.children.length != 0">

                            <el-row  v-for="(item1, index1) in scope.row.children"   :key="item1.id" :class="['vcenter',index1==0?'':'border-top']">
                                <el-col :span="4">
                                    <!-- 第一层 -->
                                    <el-tag closable @close="delx(scope.row,item1.id)">{{ item1.authName }}</el-tag>
                                </el-col>
                                <el-col :span="20">

                                    <el-row  :class="[index2==0?'':'border-top']" style="border-left: 1px solid #e5e5e5;" v-for="(item2, index2) in item1.children" :key="item2.id">
                                        <el-col :span="4">
                                            <!-- 第二层 -->
                                            <el-tag closable type="success" @close="delx(scope.row,item2.id)">{{ item2.authName }}</el-tag>
                                        </el-col>
                                        <el-col :span="20">
                                            <!-- 第三层 -->
                                            <el-tag closable type="warning" @close="delx(scope.row,item3.id)" v-for="(item3, index3) in item2.children"
                                                :key="item3.id">{{ item3.authName }} </el-tag>
                                        </el-col>
                                    </el-row>

                                </el-col>
                            </el-row>
                        </p>


                        <p v-else> 别看了太懒了没有分配权限</p>


                    </template>

                </el-table-column>
                <el-table-column type="index" label="#">
                </el-table-column>
                <el-table-column prop="roleName" label="角色名称" width="320">
                </el-table-column>
                <el-table-column prop="roleDesc" label="角色描述" width="320">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="300">
                    <template slot-scope="scope">
                        <!-- 编辑  -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="revise(scope.row)">编辑</el-button>
                        <!-- 删除  -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)">删除</el-button>
                        <!-- 权限管理  -->
                        <el-button type="warning" icon="el-icon-s-tools" size="mini"
                            @click="assign(scope.row)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 角色模态框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
            <!-- 表单  -->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="ruleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="ruleForm.roleDesc"></el-input>
                </el-form-item>
                <el-form-item>
                    <p class="p-btn">
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')" v-show="title == '添加用户'">确定</el-button>
                        <el-button type="primary" @click="reviseok('ruleForm')" v-show="title == '编辑角色'">ok</el-button>

                    </p>
                </el-form-item>
            </el-form>

        </el-dialog>
        <!-- 分配权限模态框 -->
        <el-dialog title="分配权限" :visible.sync="dialogTree" width="60%">
            <el-tree :default-checked-keys="ht" :data="treedata" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
                :props="defaultProps">
            </el-tree>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="treeok">确 定</el-button>
            </span>
        </el-dialog>

</div>
</template>
<script>

import { getroles, getaddrose, xgrevise, delroles, gettree, getassing ,getdelx} from "../api/api"
export default {
    data() {
        return {
            treeid: '',
            //表格
            tableData: [{}],
            // 模态框名字
            title: '',
            //模态框开关
            dialogVisible: false,
            // 表单 
            ruleForm: {},
            // 验证 
            rules: {
                roleName: { required: true, message: '请输入角色名称', trigger: 'blur' },
                roleDesc: { required: true, message: '请输入角色描述', trigger: 'blur' }
            },
            //树状图模态框
            dialogTree: false,
            //树状图数据
            treedata: [],
            defaultProps: {
                children: "children",
                label: "authName",
            },
            ht:[]
        }
    },
    methods: {
        //获取角色列表数据
        roles() {
            getroles().then(res => {
                console.log(res);
                this.tableData = res.data
            })
        },
        //点击添加角色出现模态款
        addroles() {
            this.dialogVisible = true
            this.title = "添加用户"

        },
        //点击确定添加角色
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('submit!');
                    //添加角色
                    getaddrose(this.ruleForm).then(res => {
                        console.log(res);
                        this.roles()
                        this.dialogVisible = false
                        this.ruleForm = {}

                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 点击revise出现模态框
        revise(row) {
            this.dialogVisible = true
            this.title = "编辑角色"
            this.ruleForm = row
        },
        // 点击reviseOK修改角色
        reviseok() {
            xgrevise(this.ruleForm).then(res => {
                console.log(res);
                this.roles()
                this.ruleForm = {}
                this.dialogVisible = false
            })
        },
        //删除
        del(row) {
            delroles(row).then(res => {
                console.log(res);
                this.roles()
            })
        },
        //点击assign出现分配权限模态框
        assign(row) {
            this.dialogTree = true
            this.treeid = row.id
            gettree().then(res => {
                console.log(res);
                this.treedata = res.data

                })
                let arr=[]
                function  fn(item) {
                    if(!item.children){
                        return arr.push(item.id)
                    }
                    item.children.forEach((i)=>fn(i))
                    
                }
                fn(row)
                this.ht=arr

        },
        //点击确认提交树状图数据
        treeok() {

            console.log(this.$refs.tree.getCheckedKeys());
            console.log(this.$refs.tree.getCheckedNodes());
            if (this.$refs.tree.getCheckedKeys().length > 0 || this.$refs.tree.getCheckedNodes() > 0) {
                let arr1 = this.$refs.tree.getCheckedKeys()
                let arr2 = this.$refs.tree.getCheckedNodes()
                let arr = [...arr1, ...arr2]
                getassing({ id: this.treeid, rids: arr.join(',') }).then(res => {
                    console.log(res);
                    this.roles()
                    this.dialogTree = false
                })

            }
        },
        //分配权限删除
        delx(row,rid){
          getdelx({roleId:row.id,rightId:rid}).then(res=>{
            // console.log(res);
                row.children=res.data
          })
        }
    },
    created() {
        this.roles()
    },
}
</script>
<style lang="scss" scoped>
.tab-box {
    margin-top: 15px;
    background-color: #fff;
    padding: 18px;
    box-sizing: border-box;

    p {
        margin-bottom: 15px;
    }
}
.vcenter{
    display: flex;
    align-items: center;
}
.p-btn {
    text-align: right;
}

.el-tag {
    margin: 10px !important;
}
.border-top{
    border-top: 1px solid #e5e5e5;
    
}

</style>